<template>
  <div>
    <div v-for="(option, index) in options" :key="index" class="option-item">
      <el-input
        v-model="option.label"
        :placeholder="`输入框 ${index + 1}`"
        style="width: 80%; margin-right: 10px"
        @input="handleInputChange(index)"
      >
        <template #prepend>
          <span>填空</span>
        </template>
      </el-input>
      <el-button
        type="danger"
        icon="el-icon-delete"
        circle
        @click="$emit('removeOption', index)"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'FillInBlank',
  props: {
    options: {
      type: Array,
      default: () => []
    },
    correctAnswer: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // 监听正确答案变化，初始化填空内容
    correctAnswer: {
      immediate: true,
      handler(newVal) {
        if (Array.isArray(newVal)) {
          this.options.forEach((option, index) => {
            option.label = newVal[index] || '';
          });
        }
      }
    }
  },
  methods: {
    handleInputChange(index) {
      // 当填空内容变化时，更新正确答案数组
      const answers = this.options.map(opt => opt.label);
      this.$emit('updateCorrectAnswer', answers);
    }
  }
};
</script>
